<script setup lang="ts">
import { NConfigProvider } from 'naive-ui'
import { Head, Menu, Footer, NaiveProvider } from '@/components/common'
import { useTheme } from '@/hooks/useTheme'
import {onMounted} from "vue";
import {debounce} from "lodash";
const { theme, themeOverrides } = useTheme()


/**
 * 侧边菜单栏显示
 */
function sidebar_show() {
  let sidebar_menu = document.getElementById("menu-env");
  if (sidebar_menu.style.display === "none" || sidebar_menu.style.display === '') {
    sidebar_menu.style.display = 'block';
  } else {
    sidebar_menu.style.display = 'none';
  }
}

function is_sidebar_show() {
  let sidebar_menu = document.getElementById("menu-env");
  if (window.innerWidth <= 768 && sidebar_menu.style.display === 'block') {
    sidebar_menu.style.display = 'none';
  }
}

const handleResize = debounce(() => {
  const screenWidth = window.innerWidth;
  let sidebar_menu = document.getElementById("menu-env");
  if (sidebar_menu == null) {
    return;
  }
  if (screenWidth <= 768 && sidebar_menu.style.display === "block") {
    sidebar_menu.style.display = "none";
  }
  if (screenWidth >= 768 && sidebar_menu.style.display === "none") {
    sidebar_menu.style.display = "block";
  }
  // 在这里你可以根据新的屏幕宽度做一些操作
}, 500); // 这里的 200 是等待时间，单位是毫秒

window.addEventListener('resize', handleResize);


</script>

<template>
  <Head class="header-env"></Head>
  <NConfigProvider
      :theme="theme"
      :theme-overrides="themeOverrides"
  >
    <div class="main-env">
      <div v-if="$route.meta.show_menu">
        <div id="menu-fold" class="mt-4 ml-4" @click="sidebar_show">
          <img class="avatar shadow-0 img-fluid rounded-circle"
               src="https://cdn.iextend.top/pay/svg/all-application.svg"/>
        </div>
        <div id="menu-env" @click="is_sidebar_show">
          <Menu class="menu"></Menu>
        </div>
      </div>

      <div class="index-home w-100">
        <NaiveProvider>
          <RouterView/>
        </NaiveProvider>
      </div>
    </div>
  </NConfigProvider>
  <Footer></Footer>
</template>


<style scoped>
.header-env {
  box-shadow: 1px 1px 1px 1px #d9d9d9;
}

#menu-fold:hover {
  cursor: pointer;
  transform: scale(1.2);
}

.menu {
  width: 240px;
  height: 100%;
  background: #f8f8f8;
}
@media (min-width: 768px) {
  .main-env{
    display: flex;
  }
  #menu-fold {
    display: none;
  }

  #menu-env {
    width: 240px;
    height: 100%;
    display: block;
  }
}

@media (max-width: 768px) {
  body, html {
    margin: 0;
    height: 100%; /* 确保body和html有全屏高度 */
  }

  #menu-fold {
    width: 32px;
    height: 32px;
    display: block;
  }
  #menu-env {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
  }
  .index-home {
    z-index: 1;
  }
}
</style>
